<template>
  <div class="order-list">
      <header-bar :head-title="headTitle" goBack="true"></header-bar>
      <div class="order-status">
        <span v-for="(item, index) in status" :class="{'act':ind === index}" @click="selectStatus(index)">{{item.title}}</span>
      </div>
      <div class="goods_list">
        <div class="order-title">
          <div class="left">2546468798461313</div>
          <div class="right status-1">待支付</div>
        </div>
        
        <div class="list">
          
          <img src="https://cdn.bestkeep.cn/goods/img/goods_1496976709841.jpg@160h_160w_2e" />
          <div class="list-intro">
            <h2>20寸PC膜拉链登机箱</h2>
            <p class="num">×1</p>
          </div>
        </div>
        <div class="list">
          <img src="https://cdn.bestkeep.cn/goods/img/goods_1496976709841.jpg@160h_160w_2e" />
          <div class="list-intro">
            <h2>20寸PC膜拉链登机箱</h2>
            <p class="num">×1</p>
          </div>
        </div>
        <div class="order-btn-group">
          <router-link :to="{name: 'orderDetail', query: {id: 1}}">订单详情</router-link>
          <router-link to="/pay">立即支付</router-link>
          <router-link to="/pay">删除订单</router-link>
        </div>
      </div>

      <div class="goods_list">
        <div class="order-title">
          <div class="left">2546468798461313</div>
          <div class="right status-1">待支付</div>
        </div>
        
        <div class="list">
          
          <img src="https://cdn.bestkeep.cn/goods/img/goods_1496976709841.jpg@160h_160w_2e" />
          <div class="list-intro">
            <h2>20寸PC膜拉链登机箱</h2>
            <p class="num">×1</p>
          </div>
        </div>
        <div class="order-btn-group">
          <router-link :to="{name: 'orderDetail', query: {id: 1}}">订单详情</router-link>
          <router-link to="/pay">立即支付</router-link>
          <router-link to="/pay">删除订单</router-link>
        </div>
      </div>

  </div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
export default {
  components: {
    HeaderBar
  },
  data () {
    return {
      ind: 0,
      status: [{
        status: 0,
        title: '全部'
      }, {
        status: 1,
        title: '待支付'
      }, {
        status: 2,
        title: '待发货'
      }, {
        status: 3,
        title: '待收货'
      }, {
        status: 4,
        title: '待评价'
      }],
      headTitle: '确认订单',
      zzz: [{
        status: 1,
        list: [
          {
            id: '11111',
            status: '0',

            goods: [
              {
                id: '1115',
                title: '【香港直邮】日本雅萌/YAMAN HRF-1 离子导入导出电动美容仪',
                thumb: 'http://www.upinkji.com/resource/attachment/images/2017/02/RfG9dOWf9DfEGUMG39zYie1267hmhM.jpg',
                marketprice: '1778.00',
                total: '1'
              }
            ]
          }]
      }]
    }
  },
  methods: {
    selectStatus (index) {
      this.ind = index;
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/order.scss';
</style>

